import React from 'react'
import "../assets/index.less"
import { L2Dwidget } from 'live2d-widget'
import { Affix} from 'antd';
import {Outlet} from 'react-router-dom'
import backArticle from "../assets/backArticle.jpg"
import InfoUser from "../components/InfoUser"
export default function index() {
  // 其他可选的模型： 
        //  小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
        //  萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json 
        //  小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json 
        //  小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
        //  初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json 
        //  学生（女）：https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
        //  海军小哥（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
        //  制服妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
        //  贤惠妹：https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json
        //  绿发妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
        //  大眼妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
        //  小狐精（女）：https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
        //  小萌妹：https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
        //  音乐妹：https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
        //  黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
        //  白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
        //  碗中鼠：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
        
        L2Dwidget.init({
    "model": {
        jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
        "scale": 1.3
    },
    "display": {
        "position": "right",
        "width": 200,
        "height": 400,
        "hOffset": 20,
        "vOffset": -20
    },
    "mobile": {
        "show": true,
        "scale": 0.5,
        "motion":true
    },
    "react": {
        "opacityDefault": 0.3,
        "opacityOnHover": 0.2
    }
});
  return (
    
  <div id="index">
  <Affix offsetTop={0} >     
  <div className='top'id="divMsgInfo">
            top
        </div>
        </Affix>  
        <div >
        <div className='viewList'>
        <Outlet/>  
        </div>
        <div className='rights'>
        <Affix offsetTop={120} >
            <div className='infouser'>
              <InfoUser/>
        </div>
        </Affix>
        </div>
        </div>
        
    </div>
    
  )
}
